<template>
  <div class="lawyer-home">
    <div class="container mx-auto px-4 py-6">
      <!-- 欢迎区域 -->
      <div class="welcome-section mb-8">
        <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-6 text-white">
          <h1 class="text-2xl font-bold mb-2">欢迎回来，张律师</h1>
          <p class="text-blue-100">今天是 {{ formatToday() }}，您有 {{ pendingTasks }} 项待办任务</p>
        </div>
      </div>

      <!-- 数据统计 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">在办案件</p>
              <p class="text-3xl font-bold text-blue-600">{{ stats.activeCases }}</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-briefcase text-blue-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md border-l-4 border-orange-500">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">待办事项</p>
              <p class="text-3xl font-bold text-orange-600">{{ stats.pendingTodos }}</p>
              <p class="text-xs text-orange-600 mt-1">含归档审核 {{ stats.archiveReviews }} 项</p>
            </div>
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-tasks text-orange-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">今日预约</p>
              <p class="text-3xl font-bold text-green-600">{{ stats.todayAppointments }}</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-calendar-check text-green-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">本月结案</p>
              <p class="text-3xl font-bold text-purple-600">{{ stats.monthlyCompleted }}</p>
            </div>
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-check-circle text-purple-600"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速操作 -->
      <div class="mb-8">
        <h2 class="text-lg font-bold text-gray-800 mb-4">快速操作</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <router-link to="/lawyer/appointments" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-calendar-alt text-green-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">日程管理</h3>
          </router-link>
          
          <router-link to="/lawyer/case-library" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-book text-purple-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">案例库</h3>
          </router-link>
          
          <router-link to="/lawyer/appraisal" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-stethoscope text-orange-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">鉴定管理</h3>
          </router-link>
          
          <router-link to="/lawyer/intelligent-qa" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-robot text-blue-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">智能问答</h3>
          </router-link>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- 待办任务 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-800">待办任务</h2>
          </div>
          <div class="p-6">
            <div class="space-y-4">
              <div v-for="task in recentTasks" :key="task.id" 
                   :class="['flex items-center justify-between p-4 rounded-lg',
                           task.type === 'archive' ? 'bg-orange-50 border border-orange-200' : 'bg-gray-50']">
                <div class="flex items-center">
                  <div :class="getPriorityColor(task.priority)" class="w-3 h-3 rounded-full mr-3"></div>
                  <div class="flex items-center">
                    <div v-if="task.type === 'archive'" class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-3">
                      <i class="fas fa-archive text-orange-600 text-sm"></i>
                    </div>
                    <div>
                      <p :class="['font-medium', task.type === 'archive' ? 'text-orange-800' : 'text-gray-800']">{{ task.title }}</p>
                      <p :class="['text-sm', task.type === 'archive' ? 'text-orange-600' : 'text-gray-600']">{{ task.description }}</p>
                    </div>
                  </div>
                </div>
                <div class="text-right">
                  <p class="text-sm text-gray-500">{{ formatDate(task.deadline) }}</p>
                  <span :class="getPriorityClass(task.priority)" class="text-xs px-2 py-1 rounded">
                    {{ getPriorityText(task.priority) }}
                  </span>
                </div>
              </div>
            </div>
            <button class="w-full mt-4 text-blue-600 hover:text-blue-700 text-sm font-medium">
              查看所有任务
            </button>
          </div>
        </div>

        <!-- 最近案件 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-800">最近案件</h2>
          </div>
          <div class="p-6">
            <div class="space-y-4">
              <div v-for="case_ in recentCases" :key="case_.id" class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                <div>
                  <p class="font-medium text-gray-800">{{ case_.title }}</p>
                  <p class="text-sm text-gray-600">{{ case_.client }}</p>
                  <p class="text-xs text-gray-500">{{ formatDate(case_.updatedAt) }}</p>
                </div>
                <div>
                  <span :class="getStatusClass(case_.status)" class="text-xs px-2 py-1 rounded">
                    {{ getStatusText(case_.status) }}
                  </span>
                </div>
              </div>
            </div>
            <button class="w-full mt-4 text-blue-600 hover:text-blue-700 text-sm font-medium">
              查看所有案件
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

export default {
  name: 'LawyerHome',
  setup() {
    const stats = ref({
      activeCases: 12,
      pendingTodos: 8,
      archiveReviews: 2,
      todayAppointments: 3,
      monthlyCompleted: 8
    })
    
    const recentTasks = ref([
      {
        id: 1,
        title: '归档审核 - 交通事故案',
        description: '案件TA2024001789需要归档审核，已完成所有流程',
        deadline: '2024-01-20',
        priority: 'high',
        type: 'archive'
      },
      {
        id: 2,
        title: '归档审核 - 劳动纠纷案',
        description: '案件LT2024000256已结案，等待归档审核',
        deadline: '2024-01-21',
        priority: 'high',
        type: 'archive'
      },
      {
        id: 3,
        title: '起草民事起诉状',
        description: '劳动纠纷案件起诉状起草',
        deadline: '2024-01-22',
        priority: 'medium',
        type: 'document'
      },
      {
        id: 4,
        title: '客户面谈准备',
        description: '准备明天与客户的面谈资料',
        deadline: '2024-01-19',
        priority: 'low',
        type: 'meeting'
      }
    ])
    
    const recentCases = ref([
      {
        id: 1,
        title: '交通事故人身损害赔偿纠纷',
        client: '王先生',
        status: 'active',
        updatedAt: '2024-01-18'
      },
      {
        id: 2,
        title: '劳动合同纠纷案',
        client: '李女士',
        status: 'pending',
        updatedAt: '2024-01-17'
      },
      {
        id: 3,
        title: '房屋买卖合同纠纷',
        client: '张先生',
        status: 'completed',
        updatedAt: '2024-01-16'
      }
    ])
    
    const pendingTasks = computed(() => {
      return recentTasks.value.filter(task => task.priority === 'high').length + 2
    })
    
    const formatToday = () => {
      return dayjs().format('YYYY年MM月DD日 dddd')
    }
    
    const formatDate = (date) => {
      return dayjs(date).format('MM-DD')
    }
    
    const getPriorityColor = (priority) => {
      const colors = {
        high: 'bg-red-500',
        medium: 'bg-yellow-500',
        low: 'bg-green-500'
      }
      return colors[priority] || 'bg-gray-500'
    }
    
    const getPriorityClass = (priority) => {
      const classes = {
        high: 'bg-red-100 text-red-800',
        medium: 'bg-yellow-100 text-yellow-800',
        low: 'bg-green-100 text-green-800'
      }
      return classes[priority] || 'bg-gray-100 text-gray-800'
    }
    
    const getPriorityText = (priority) => {
      const texts = {
        high: '紧急',
        medium: '中等',
        low: '低级'
      }
      return texts[priority] || '普通'
    }
    
    const getStatusClass = (status) => {
      const classes = {
        active: 'bg-blue-100 text-blue-800',
        pending: 'bg-yellow-100 text-yellow-800',
        completed: 'bg-green-100 text-green-800'
      }
      return classes[status] || 'bg-gray-100 text-gray-800'
    }
    
    const getStatusText = (status) => {
      const texts = {
        active: '进行中',
        pending: '待处理',
        completed: '已完成'
      }
      return texts[status] || '未知'
    }
    
    return {
      stats,
      recentTasks,
      recentCases,
      pendingTasks,
      formatToday,
      formatDate,
      getPriorityColor,
      getPriorityClass,
      getPriorityText,
      getStatusClass,
      getStatusText
    }
  }
}
</script>

<style scoped>
.lawyer-home {
  padding: 20px 0;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 20px;
}

.home-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 